<template>
  <div class="home">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <Item01Vue />
        </div>
        <div class="swiper-slide">
          <Item02Vue />
        </div>
      </div>
    </div>
    <Arrow />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Swiper from 'swiper'
import * as swiperAnimate from './../common/swiper.animate'
import 'swiper/css'

import Arrow from '@/components/Arrow/index.vue'

import Item01Vue from '@/components/Item01.vue'
import Item02Vue from '@/components/Item02.vue'

const init = () => {
  new Swiper('.swiper-container', {
    direction: 'vertical',
    centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左
    slideToClickedSlide: true,
    mousewheel: true,
    on: {
      init: function () {
        swiperAnimate.swiperAnimateCache(this) //隐藏动画元素
        swiperAnimate.swiperAnimate(this) //初始化完成开始动画
      },
      slideChangeTransitionEnd: function () {
        swiperAnimate.swiperAnimate(this) //每个slide切换结束时也运行当前slide动画
      }
    }
  })
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: #666;
  .swiper-container {
    width: 100%;
    height: 100%;
  }
}
</style>
